<style>
  .step-generation{
    background: #F4F8FC;
    padding: 80px 0;
  }
  .step-education_generation {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 40px;
    text-align: center;
}
.step-block .text{
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin: 8px auto 12px;
}
.start-education .text p{
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 40px;
}
.step-block .richtext{
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.step-block .richtext p{
  margin-top: 8px;
  margin-bottom: 0;
}
.start-education .title{
  margin-bottom: 20px;
}
.start-education .banner__buttons{
  text-align: center;
  margin-top: 40px;
}
.start-education .banner__buttons a{
  background: linear-gradient(180deg, #599BF4 0%, #0D74FF 100%);
}


@media screen and (max-width:990px) {
.step-generation {
    padding: 40px 0;
 }
 .step-education_generation {
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    text-align: center;
}
 .start-education .text p {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 36px;
}
.start-education .banner__buttons {
    margin-top: 36px;
}
}


@media screen and (max-width:640px) {
  .step-block {
    display: flex;
    align-items: center;
}
.step-text {
  text-align: left;
  padding-left: 12px;
}
.step-text .text {
    font-size: 14px;
    list-style: 22px;
    margin-top: 0;
}
.step-text .text{
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
.step-block .richtext p {
  margin-bottom: 0;
  font-size: 14px;
}
.step-education_generation {
    grid-template-columns: repeat(1,1fr);
    grid-gap: 20px;
  }
  .step-block svg{
    width: 72px;
    height: 72px;
  }
}
</style>

<div class="start-education">
  <div class="page-width">
    {% if section.settings.text != blank %}
      <h2 class="title">{{ section.settings.text | escape }}</h2>
    {% endif %}
    {% if section.settings.richtext != blank %}
      <div class="text center">{{ section.settings.richtext }}</div>
    {% endif %}
    <div class="step-education_generation">
      {% for block in section.blocks %}
        <div class="step-block" {{ block.shopify_attributes }}>
          {% if block.settings.html != blank %}
          <div class="html"> {{ block.settings.html }}</div>
          {% endif %}
          {% if block.settings.text != blank %}
          <div class="step-text">
            <div class="text"> {{ block.settings.text }}</div>
            {% if block.settings.richtext != blank %}
            <div class="richtext"> {{ block.settings.richtext }}</div>
           {% endif %}
          </div>
       {% endif %}
        </div>
      {% endfor %}  
    </div>
    {%- if section.settings.button_label != blank -%}
      <div class="banner__buttons{% if section.settings.button_label != blank and section.settings.button_link != blank  %} banner__buttons--multiple{% endif %}">
      {%- form 'localization', id: 'FooterCountryForm' -%}
        {% if localization.country.iso_code == 'DE' and localization.country.currency.symbol != blank %} 
            <a {% if section.settings.button_link != blank %}href="{{ section.settings.button_link }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} > 
        {% elsif localization.country.iso_code == 'FR' %}
            <a {% if section.settings.button_link_fr != blank %}href="{{ section.settings.button_link_fr }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'NL' %}   
            <a {% if section.settings.button_link_nl != blank %}href="{{ section.settings.button_link_nl }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'ES' %}    
            <a {% if section.settings.button_link_es != blank %}href="{{ section.settings.button_link_es }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'IE' %}     
            <a {% if section.settings.button_link_ie != blank %}href="{{ section.settings.button_link_ie }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'IT' %}     
            <a {% if section.settings.button_link_it != blank %}href="{{ section.settings.button_link_it }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'BE' %}   
            <a {% if section.settings.button_link_be != blank %}href="{{ section.settings.button_link_be }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'DK' %}   
            <a {% if section.settings.button_link_dk != blank %}href="{{ section.settings.button_link_dk }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'PL' %}   
            <a {% if section.settings.button_link_pl != blank %}href="{{ section.settings.button_link_pl }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'SE' %}    
            <a {% if section.settings.button_link_se != blank %}href="{{ section.settings.button_link_se }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'AT' %}     
            <a {% if section.settings.button_link_at != blank %}href="{{ section.settings.button_link_at }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% elsif localization.country.iso_code == 'GB' %}    
            <a {% if section.settings.button_link_uk != blank %}href="{{ section.settings.button_link_uk }}" {% endif %} target="_blank" class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% else %}  
            <a {% if section.settings.button_link == blank %}href="{{ section.settings.button_link }}" {% endif %} class="bg-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %} >
        {% endif %}  
      {%- endform -%} 
        <span>{{ section.settings.button_label | escape }}</span>
      </a>
    </div>
  {%- endif -%}
  </div>
</div>





{% schema %}
{
  "name": "Step generation",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width step-generation",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "text"
    },
    {
      "type": "richtext",
      "id": "richtext",
      "label": "Richtext"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "info": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "button Link DE"
    },
    {
      "type": "url",
      "id": "button_link_fr",
      "label": "button Link FR"
    },
    {
      "type": "url",
      "id": "button_link_nl",
      "label": "button Link NL"
    },
    {
      "type": "url",
      "id": "button_link_es",
      "label": "button Link ES"
    },
    {
      "type": "url",
      "id": "button_link_ie",
      "label": "button Link IE"
    },
    {
      "type": "url",
      "id": "button_link_it",
      "label": "button Link IT"
    },
    {
      "type": "url",
      "id": "button_link_be",
      "label": "button Link BE"
    },
    {
      "type": "url",
      "id": "button_link_dk",
      "label": "button Link DK"
    },
    {
      "type": "url",
      "id": "button_link_pl",
      "label": "button Link PL"
    },
    {
      "type": "url",
      "id": "button_link_se",
      "label": "button Link SE"
    },
    {
      "type": "url",
      "id": "button_link_at",
      "label": "button Link AT"
    },
    {
      "type": "url",
      "id": "button_link_uk",
      "label": "button Link UK"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "column",
      "settings": [
      {
        "type": "html",
        "id": "html",
        "label": "Icon"
      },
      {
      "type": "text",
      "id": "text",
      "label": "text"
     },
      {
        "type": "richtext",
        "id": "richtext",
        "label": "Richtext"
      }
      ]
    }
  ],
  "presets": [
    {
      "name": "Step generation",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}
